<template>
	<view class="UploadItem">
		<view :class="{'required-field':required}" class="item-title" :style="type === 'imgUploader'?{width:'100%'}:''">{{title}}</view>
		<view class="item-right" v-if="type !== 'imgUploader'">
			<input @input="handleInput" :disabled="onlyRead" class="item-value" v-if="type === 'input'" :placeholder="placeholder" :value="value"></input>
			<picker v-if="type === 'selector'" class="item-picker" @change="handlePickerChange" :range="selectorRange">
				<view class="item-value">{{value}}<i class="iconfont icon-xiangyou"></i></view>
			</picker>
			<picker :value="[parentCIndex,childrenCIndex]" @change="handleMultiPickerChange" @columnchange="handleColumnChange" v-if="type === 'multiSelector' && multiSelectorRange" mode="multiSelector" class="item-picker" :range="multiSelectorRange" :range-key="rangeKey">
				<view v-if="!unselect" class="item-value">{{multiSelectorRange[0][parentCIndex].title}} - {{multiSelectorRange[1][childrenCIndex].title}}<i class="iconfont icon-xiangyou"></i></view>
				<view v-else class="item-value"><i class="iconfont icon-xiangyou"></i></view>
			</picker>
		</view>
		<textarea @input="handleInput" :placeholder="placeholder" :disabled="onlyRead" :value="value" class="item-textarea" v-if="type === 'textarea'" ></textarea>
		<view class="img-uploader" v-if="type === 'imgUploader'" @click="selectImg">
			<image mode="aspectFit" :src="imgPath" v-if="imgPath"></image>
			<i class="iconfont icon-jia" v-else></i>
			<view class="img-delete" v-if="imgPath" @click.stop="deleteImg"><i class="iconfont icon-jia"></i></view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "UploadItem",
		props:{
			title:{
				type:String,
				default:''
			},
			value:{
				type:String,
				default:''	
			},
			type:{
				type:String,
				default:'input'
			},
			selectorRange:{
				type:Array,
				default: () => {
					return []
				}
			},
			rangeKey:{
				type:String,
				default:''
			},
			uploadImg:{
				type:String,
				default:''
			},
			placeholder:{
				type:String,
				default:''
			},
			
			onlyRead:{
				type:Boolean,
				default:false
			},
			required:{
				type:Boolean,
				default:false
			}
			
		},
		data (){
			return{
				imgPath:this.uploadImg,
				//未选择标志
				unselect:true,
				//当前选中的一级分类下标
				parentCIndex:0,
				//当前选中的二级分类下标
				childrenCIndex:0,
				childrenList:[]
			};
		},
		watch:{
			imgPath(v){
				this.$emit('update:uploadImg',v)
			}
		},
		computed:{
			multiSelectorRange(){
				if(this.selectorRange.length > 0){
					
					const parentList = this.selectorRange.map(item=>{
						return {
							id: item.id,
							title: item.title
						}
					})
					this.childrenList = this.selectorRange[this.parentCIndex].children
					// this.$emit('input', this.selectorRange[0].title + '-' + this.selectorRange[0].children[0].title)
					return [[...parentList] , [...this.childrenList]]
				}
			}
		},
		methods:{
			handlePickerChange({detail}){
				this.$emit('input', this.selectorRange[detail.value])
			},
			selectImg(){
				if (this.imgPath) {
					return
				}
				uni.chooseImage({
					count:1,
					success: ({tempFilePaths}) => {
						this.imgPath = tempFilePaths[0]
						console.log('imgPath',this.imgPath);
					}
				})
			},
			deleteImg(){
				this.imgPath = ''
			},
			handleInput({detail}){
				this.$emit('input',detail.value.trim())
			},
			handleColumnChange({detail}){
				if(detail.column === 0){
					this.parentCIndex = detail.value
					this.childrenCIndex = 0
				}
			},
			handleMultiPickerChange({detail}){
				this.parentCIndex = detail.value[0]
				this.childrenCIndex = detail.value[1]
				this.unselect = false
				this.$emit('input', this.multiSelectorRange[0][this.parentCIndex].id + '-' + this.multiSelectorRange[1][this.childrenCIndex].id)
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	$imgUploaderWidth: 250rpx;
	$imgDeleteWidth: 50rpx;
	.UploadItem{
		position: relative;
		width: 90%;
		margin: auto;
		min-height: 100rpx;
		height: fit-content;
		background-color: #F8F8F8;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		box-sizing: border-box;
		flex-wrap: wrap;
		
		.item-title{
			font-weight: bold;
			&.required-field::after{
				content: '*';
				color: rgb(182,37,25);
				margin-left: 10rpx;
			}
		}
		
		
		
		.item-right{
			// border: 1px #007AFF solid;
			height: 100%;
			// width: 80%;
			flex: 1;
			// width: 6rem;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			box-sizing: border-box;
			flex-wrap: wrap;
			.item-value{
				margin-left: 20rpx;
				width: 100%;
				// border: 1px solid green;
				text-align: right;
				// direction: rtl;
			}
			input{
				margin-right: 20rpx;
			}
			.item-picker{
				// position: absolute;
				right: 0;
				width: 100%;
				box-sizing: border-box;
				padding: 0 20rpx 0 0;
				// border: 1px black solid;
				height: 100%;
				display: flex;
				justify-content: flex-end;	
				align-items: center;
				// flex: 1;
				.item-value{
					flex: 2;
					height: 100%;
					// border: 1px red solid;
					box-sizing: border-box;
					display: flex;
					justify-content: flex-end;
					align-items: center;
					
					i{
						margin-left: 20rpx;
						color: #8a8a8a;
					}
				}
			}
			
			// .item-picker{
			// 	border: 1px black solid;
			// 	flex: 1;
				
			// 	.item-value{
					
					
			// 		i{
			// 			margin-left: 20rpx;
			// 			color: #8a8a8a;
			// 		}
			// 	}
			// }
		}
		
		.img-uploader{
			position: relative;
			margin-top: 40rpx;
			// border: blue 1px solid;
			background-color: rgb(226, 226, 226);
			width: $imgUploaderWidth;
			height: $imgUploaderWidth;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx;
			box-sizing: border-box;
			
			image{
				width: 100%;
				height: 100%;
			}
			
			i{
				font-size: 100rpx;
				color: #F8F8F8;
			}
			
			.img-delete{
				position: absolute;
				width: $imgDeleteWidth;
				height: $imgDeleteWidth;
				background-color: white;
				box-shadow: 0 0 10rpx 3rpx #c8c7cc;	
				border-radius: 50%;
				right: -$imgDeleteWidth / 2;
				top: -$imgDeleteWidth / 2;
				display: flex;
				justify-content: center;
				align-items: center;
				
				i{
					font-size: 35rpx;
					color: #1296db;
					transform: rotate(45deg);
				}
			}
		}
		
		.item-textarea{
			width: 100%;
			padding: 20rpx;
			margin-top: 40rpx;
			// background-color: rgba(0,0,0,.1);
			border-radius: 10rpx;
			border: 3rpx solid rgba(0,0,0,.1);
		}
	}
</style>
